<template>
  <div class="app-container">
    <el-form ref="form" :model="form" label-width="130px">
      <el-tabs type="card">

        <el-tab-pane label="支付方式">
          <el-form-item label="支付宝">
            <el-switch
              v-model="form.alipay_open"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="微信">
            <el-switch
              v-model="form.wechat_open"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>

          <el-form-item label="线下扫码">
            <el-switch
              v-model="form.offline_open"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="余额支付">
            <el-switch
              v-model="form.balance_open"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="支付宝配置web">
          <el-form-item label="支付宝APPID">
            <el-input v-model="form.alipay_appid" placeholder="支付宝APPID"/>
          </el-form-item>
          <el-form-item label="支付宝公钥">
            <el-input v-model="form.alipay_public_key" type="textarea" rows="4" placeholder="支付宝公钥去头去尾去空格"/>
          </el-form-item>
          <el-form-item label="支付宝私钥">
            <el-input
              v-model="form.alipay_private_key"
              type="textarea"
              rows="4"
              placeholder="支付宝私钥去头去尾去空格"
            />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="支付宝配置APP">
          <el-form-item label="支付宝APPID">
            <el-input v-model="form.alipay_app_appid" placeholder="支付宝APPID"/>
          </el-form-item>
          <el-form-item label="支付宝公钥">
            <el-input
              v-model="form.alipay_app_public_key"
              type="textarea"
              rows="4"
              placeholder="支付宝公钥去头去尾去空格"
            />
          </el-form-item>
          <el-form-item label="支付宝私钥">
            <el-input
              v-model="form.alipay_app_private_key"
              type="textarea"
              rows="4"
              placeholder="支付宝私钥去头去尾去空格"
            />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="微信配置">
          <el-form-item label="服务商模式">
            <el-switch
              v-model="form.wechat_sp_open"
              active-color="#13ce66"
              inactive-color="#ff4949"
            />
          </el-form-item>
          <el-form-item label="APP应用APPID">
            <el-input v-model="form.wechat_app_appid" placeholder="APP应用APPID"/>
          </el-form-item>
          <el-form-item label="APP应用秘钥">
            <el-input v-model="form.wechat_app_secret" placeholder="APP应用秘钥"/>
          </el-form-item>
           <el-form-item label="小程序APPID">
            <el-input v-model="form.wechat_xcx_appid" placeholder="小程序APPID"/>
          </el-form-item>
          <el-form-item label="小程序密钥">
            <el-input v-model="form.wechat_xcx_secret" placeholder="小程序密钥"/>
          </el-form-item>
          <el-form-item label="公众号APPID">
            <el-input v-model="form.wechat_gzh_appid" placeholder="公众号APPID"/>
          </el-form-item>
          <el-form-item label="公众号密钥">
            <el-input v-model="form.wechat_gzh_secret" placeholder="公众号密钥"/>
          </el-form-item>
          <el-form-item label="微信商户号">
            <el-input v-model="form.wechat_mchid" placeholder="微信商户号"/>
          </el-form-item>
          <el-form-item label="支付秘钥">
            <el-input v-model="form.wechat_mchkey" placeholder="微信支付 apiV3key"/>
            <span
              class="bs-red"
            >微信支付 apiV3key（尽量包含大小写字母，否则验签不通过，服务商模式使用服务商key）</span>
          </el-form-item>
          <el-form-item label="微信证书内容">
            <el-input
              v-model="form.wechat_public_key"
              type="textarea"
              rows="4"
              placeholder="平台证书或支付公钥（Api安全中下载）"
            />
            <span
              class="bs-red"
            >平台证书或支付公钥（Api安全中下载）（微信支付新申请的，已不支持平台证书，老版调用证书列表，自动生成平台证书，注意目录权限）</span>
          </el-form-item>



          <div v-if="form.wechat_sp_open">
            <el-form-item label="服务商应用ID">
              <el-input v-model="form.wechat_sp_appid" placeholder="服务商应用ID"/>
            </el-form-item>
            <el-form-item label="服务商商户号">
              <el-input v-model="form.wechat_sp_mchid" placeholder="服务商商户号"/>
            </el-form-item>
            <el-form-item label="服务商编号">
              <el-input v-model="form.wechat_sp_serial_no" placeholder="服务商编号"/>
              <span class="bs-red">商户API证书序列号（可不传，默认根据证书直接获取）</span>
            </el-form-item>
            <el-form-item label="客户端证书">
              <el-input
                v-model="form.wechat_sp_cert_client"
                type="textarea"
                rows="4"
                placeholder=" 证书（退款，红包时使用）"
              />
            </el-form-item>
            <el-form-item label="商户API证书私钥">
              <el-input
                v-model="form.wechat_sp_cert_key"
                type="textarea"
                rows="4"
                placeholder=" 商户API证书私钥（Api安全中下载）"
              />
            </el-form-item>
          </div>

        </el-tab-pane>
        <el-tab-pane label="线下收款码">
          <el-form-item label="二维码">
            <upload-chunk :drag="false" :auto-upload="true" :file-size="1" @uploaded="afterUpload"/>
            <el-input v-model="form.offline_qrcode" placeholder="线下转账收款码"/>
            <el-tooltip class="item" effect="light" content="150*150" placement="top">
              <i class="el-icon-question"/>
            </el-tooltip>
            <el-image
              v-if="form.offline_qrcode"
              style="width: 100px;height: 100px"
              :src="form.offline_qrcode"
              :preview-src-list="[form.offline_qrcode]"
            />
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="其他设置">
          <el-form-item label="支付超时时间">
            <el-input v-model="form.pay_timeout" placeholder="支付超时时间,单位：分钟"/>
            <el-tooltip class="item" effect="dark" content="支付超时时间,单位：分钟" placement="top">
              <i class="el-icon-question"/>
            </el-tooltip>
          </el-form-item>
          <el-form-item label="收银台地址">
            <el-input v-model="form.cashier_url" placeholder="收银台地址，H5支付页面"/>
            <el-tooltip class="item" effect="dark" content="如果用第三方支付页面，请填写" placement="top">
              <i class="el-icon-question"/>
            </el-tooltip>
          </el-form-item>
        </el-tab-pane>

      </el-tabs>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
      </el-form-item>
    </el-form>
  </div>

</template>

<script>
import api from '@/api/setting'
import UploadChunk from '@/components/UploadFile/UploadChunk.vue'

export default {
  components: {
    UploadChunk
  },
  data() {
    return {
      key: 'payment',
      form: {
        id: 0,
        alipay_open: true,
        wechat_open: true,
        balance_open: true,
        cod_open: true,
        offline_open: true,
        pay_timeout: 30,
        cashier_url: '',
        alipay_appid: '',
        alipay_public_key: '',
        alipay_private_key: '',
        alipay_app_appid: '',
        alipay_app_public_key: '',
        alipay_app_private_key: '',
        wechat_app_appid: '', // app应用 appid
        wechat_app_secret: '', // app应用 secret
        wechat_mchid: '', // 微信支付 mch_id 商户收款账号
        wechat_mchkey: '', // 微信支付 apiV3key（尽量包含大小写字母，否则验签不通过，服务商模式使用服务商key）
        wechat_public_key_id: '', // 平台证书序列号或支付公钥ID,（支付公钥ID请带：PUB_KEY_ID_ 前缀，默认根据证书直接获取，不带前缀）
        wechat_public_key: '', // 平台证书或支付公钥（Api安全中下载）（微信支付新申请的，已不支持平台证书，老版调用证书列表，自动生成平台证书，注意目录权限）
        wechat_xcx_appid: '', // 小程序 appid
        wechat_xcx_secret: '', // 小程序 秘钥
        wechat_gzh_appid: '', // 公众号 appid
        wechat_gzh_secret: '', // 公众帐号 secert (公众号支付获取 code 和 openid 使用)
        wechat_sp_open: false, // 服务商模式
        wechat_sp_appid: '', // 服务商应用 ID
        wechat_sp_mchid: '', // 服务商户号
        wechat_sp_serial_no: '', // 服务商 商户API证书序列号（可不传，默认根据证书直接获取）
        wechat_sp_cert_client: '', // 服务商 证书（退款，红包时使用）
        wechat_sp_cert_key: '', // 服务商商户API证书私钥（Api安全中下载）

        offline_qrcode: ''
      }
    }
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      api.info({ key: this.key }).then((res) => {
        if (res.code === 0) {
          this.form = res.data.value
          this.form.id = res.data.id
        }
      })
    },
    onSubmit() {
      console.log(this.form)
      let req
      const data = {
        type: 1,
        id: this.form.id,
        key_name: this.key,
        description: this.form.description,
        title: '支付配置',
        value: JSON.stringify(this.form)
      }
      if (this.form.id > 0) {
        req = api.update(data)
      } else {
        req = api.create(data)
      }
      req.then((res) => {
        this.$message({
          type: res.code === 0 ? 'success' : 'error',
          message: res.msg,
          duration: 500,
          onClose: () => {
            // this.$router.push({ path: '/setting/index' })
          }
        })
      }).catch((error) => {

      })
    },
    afterUpload(url) {
      this.form.offline_qrcode = url
    }

  }
}
</script>

<style scoped>

</style>
